<template>
    <div class="transfer-data">
        <ModalTitle title="智能化流转数据展示" />
        <div class="fours">
            <div class="f-item" v-for="(item, index) in fourList" :key="index">
                <div class="item-pic">
                    <img :src="item.icon" alt="">
                </div>
                <div class="item-num">
                    <p>{{ item.number }}</p>
                    <span>{{ item.title }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
// 智能化流转数据展示
import ModalTitle from '@components/ModalTitle/Index.vue'
import { ZhiNengHuaYingYongFenXi } from '@/api/zhangzi'
export default {
    components: { ModalTitle },
    data() {
        return {
            fourList: [{ title: '智能报警次数', number: 0, icon: require('../../../../assets/images/zhangzi/tongji/baojing.png') }, { title: '智能受理次数', number: 0, icon: require('../../../../assets/images/zhangzi/tongji/shouli.png') }, { title: '智能批转次数', number: 0, icon: require('../../../../assets/images/zhangzi/tongji/pizhuan.png') }, { title: '处置记录次数', number: 0, icon: require('../../../../assets/images/zhangzi/tongji/chuzhi.png') },]
        }
    },
    created() {
        this.getTransferData()
    },
    methods: {
        async getTransferData() {
            const res = await ZhiNengHuaYingYongFenXi.intelligentDataDisplayAPI()
            if (res.success) {
                this.fourList[0].number = res.data.smartAlarmTimes || 0
                this.fourList[1].number = res.data.smartAcceptances || 0
                this.fourList[2].number = res.data.intelligentBatchForwarding || 0
                this.fourList[3].number = res.data.disposeOfRecords || 0
            } else {
                this.$message.error(res.message)
            }
        }
    },
}
</script>

<style lang="less" scoped>
.transfer-data {
    width: 100%;
    height: 23.2rem;
    margin-bottom: 2rem;

    .fours {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        width: 100%;
        height: calc(100% - 3.8rem - 1.5rem);
        margin-top: 1.5rem;

        .f-item {
            display: flex;
            flex: 50%;
            height: 5.8rem;

            .item-pic {
                width: 6rem;
                height: 100%;
                margin-right: 1.5rem;

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .item-num {
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: flex-start;
                flex: 1;
                height: 100%;

                >p {
                    font-size: 2.4rem;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #00FCFD;
                }

                >span {
                    font-size: 1.4rem;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #FFFFFF;
                }
            }
        }
    }
}
</style>